import React from 'react';
import type { SvgProps } from 'react-native-svg';
import {
  Arrow as NativeArrow,
  ArrowDown as NativeArrowDown,
  ArrowLeft as NativeArrowLeft,
  ArrowUp as NativeArrowUp,
  FireO as NativeFireO,
  LocationO as NativeLocationO,
  Photo as NativePhoto,
  PhotoFail as NativePhotoFail,
  Plus as NativePlus,
  Replay as NativeReplay,
  ShopO as NativeShopO,
} from '@react-vant/icons';

type WrapperProps = Omit<SvgProps, 'style'> & {
  className?: string;
  wrapperStyle?: React.CSSProperties;
  iconStyle?: SvgProps['style'];
  size?: number | string;
};

const withWrapper = (IconComponent: React.ComponentType<SvgProps>) => {
  const Wrapped = React.forwardRef<any, WrapperProps>(
    ({ className, wrapperStyle, iconStyle, size = 20, ...rest }, ref) => {
      return (
        <span
          className={className}
          style={{ display: 'inline-flex', lineHeight: 0, ...wrapperStyle }}
        >
          <IconComponent ref={ref} size={size} style={iconStyle} {...rest} />
        </span>
      );
    },
  );

  Wrapped.displayName = `RvIcon(${IconComponent.displayName || IconComponent.name || 'Icon'})`;
  return Wrapped;
};

export const Arrow = withWrapper(NativeArrow);
export const ArrowDown = withWrapper(NativeArrowDown);
export const ArrowLeft = withWrapper(NativeArrowLeft);
export const ArrowUp = withWrapper(NativeArrowUp);
export const FireO = withWrapper(NativeFireO);
export const LocationO = withWrapper(NativeLocationO);
export const Photo = withWrapper(NativePhoto);
export const PhotoFail = withWrapper(NativePhotoFail);
export const Plus = withWrapper(NativePlus);
export const Replay = withWrapper(NativeReplay);
export const ShopO = withWrapper(NativeShopO);
